<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<title>LayIM-MB</title>

	<!-- 自动查找引入进来的工具类脚本。 -->
	<link rel="stylesheet" href="./dist/css/layui.mobile.css" media="all">
</head>
<body>
<!-- 自动查找引入进来的工具类脚本。 -->
<script src="./dist/layui.js" charset="utf-8"></script>

<script>
layui.config({
	version: true
}).use(['mobile'], function(){
	var mobile = layui.mobile,
		layim = mobile.layim,
		$= layui.jquery;
	var targetID = null;
	var ws = new WebSocket("ws://192.168.1.116:8080");
	// 连接成功
    ws.onopen = function (e) {
		console.log('连接成功获取到的上半段脚本定义的用户数据');
        // console.log('连接成功获取到的上半段脚本定义的用户数据',userid,username,avatar,kfid,YWtype);
        ws.send(JSON.stringify({
			type: 'REGISTER_YH', 	// 随便定义，用于在服务端区分消息类型
			userid: userid,			// 写入自身id
		}));
	}
    // 连接关闭
	// ws.onclose = function (e) {
	// 	console.log('连接关闭');
	// }

	// 接收消息
	ws.onmessage = function(res) { 
		// res为接受到的值，如 {"emit": "messageName", "data": {}}
		// emit即为发出的事件名，用于区分不同的消息
		res = JSON.parse(res.data);
		console.log('客户端收到一条消息',res.data);
		if(res.type == 'CHATMSG_YH'){
			//res.data即你发送消息传递的数据（阅读：监听发送的消息）
			layim.getMessage({
				username: '客服'+kfid,
				id: kfid,
				avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1",
				type: 'kefu',
				content: res.data.data.mineCONTENT,
				mine: false,
				timestamp: res.data.data.timestamp * 1000,
			});
		}
	}; 
	
	layim.config({
		init: {
		// 配置客户信息
			mine: {
				"username": username	//我的昵称
				,"id": userid			//我的ID
				,"avatar": avatar 		//我的头像
			}
		}
		,skin: ['http://tvax1.sinaimg.cn/crop.0.0.300.300.180/006Iv8Wjly8ff7ghbigcij308c08ct8i.jpg'] //新增皮肤
		// 开启客服模式(简约模式开启后不显示主面板)
		,brief: true
		// 上传图片接口
		,uploadImage: {
			url: '/upload/image', 	//（返回的数据格式见下文）
			type: 'post', 			//默认post
		}
		// 聊天记录
		,chatLog: '/chatlog.html'
		// ,chatLog: layui.cache.dir + './chatlog.html' 
		// 上传文件接口
		// ,uploadFile: {
		// 	url: '/upload/file' //（返回的数据格式见下文）
		// 	,type: '' //默认post
		// }
	});
	// 打开一个客服面板
	layim.chat({
		name: '客服' + kfid,		// 名称
		id: kfid, 		// 定义唯一的id方便你处理信息
		avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1",	// 头像地址
		type: 'kefu', 		// 聊天类型
	});
	//监听发送消息
	layim.on('sendMessage', function(data){
		var timestamp = Math.round(new Date().getTime()/1000);
		var targetID = data.to.id;
		// var targetNAME = data.to.name;
		var mineID = data.mine.id;
		var mineNAME = data.mine.username;
		var mineAVATAR = data.mine.avatar;
		var mineCONTENT = data.mine.content;
		console.log(timestamp,targetID,'发送时间 和 要发送对象的id');
		console.log(mineID,mineNAME,mineCONTENT,'自身的id、名称、发送的信息');
		
		if(YWtype == 1) {
			console.log("qweqwe111");
			// 发送消息
			ws.send(JSON.stringify({
				type: 'CHATMSG_KF',		// 随便定义，用于在服务端区分消息类型
				data: {timestamp,targetID,mineID,mineNAME,mineAVATAR,mineCONTENT},		// data内容
			}));
		}else if(YWtype == 2) {
			console.log("qweqwe222");
			// 发送消息
			ws.send(JSON.stringify({
				type: 'CHATMSG_GH',		// 随便定义，用于在服务端区分消息类型
				data: {timestamp,targetID,mineID,mineNAME,mineAVATAR,mineCONTENT},		// data内容
			})); 
		}else if(YWtype == 3) {
			console.log("qweqwe333");
			// 发送消息
			ws.send(JSON.stringify({
				type: 'CHATMSG_CG',		// 随便定义，用于在服务端区分消息类型
				data: {timestamp,targetID,mineID,mineNAME,mineAVATAR,mineCONTENT},		// data内容
			})); 
		}
	});
});
</script>
</body>
</html>
